<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body,div,ul,li {margin:0;padding:0;}
		ul {list-style-type:none;}

		body {background:#000;text-align:center;font:12px/20px Arial;}

		#box {position:relative;width:492px;height:172px;background:#fff;border-radius:8px;margin:10px auto;}

		#box .list {position:relative;width:490px;height:170px;overflow:hidden;border:1px solid #ccc;}
		/* 此处有层意义，首先通过position相对--绝对定位，将li层都叠加在一起；
			然后，将每层的透明度效果全部初始化为透明，即：为0；
			这样，额也是为了后续js淡入淡出效果提供一个原始环境，在切换的时候，当前效果不会受到其他效果的影响；
		 */
		#box .list li {position:absolute;top:0;left:0;width:490px;height:170px;opacity:0;filter:alpha(opacity=0);}
		#box .list li.current {opacity:1;filter:alpha(opacity=100);}
		
		#box .count {position:absolute;right:0;bottom:5px;overflow:hidden;}
		#box .count li {color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;background:#f90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}
		#box .count li.current {color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}
	</style>
	<script>
	window.onload = function() {
		var oBox = document.getElementById("box");
		var aUl = document.getElementsByTagName("ul");
		var aImg = aUl[0].getElementsByTagName("li");
		var aNum = aUl[1].getElementsByTagName("li");
		var timer = play = null;
		var i = index= 0;
		//切换按钮
		for(i=0;i<aNum.length;i++){
			aNum[i].index = i;
			aNum[i].onmouseover = function() {
				show(this.index);
			}
		}

		//鼠标滑过关闭自动播放
		oBox.onmouseover = function() { clearInterval(play) };
		//鼠标离开启动自动播放
		oBox.onmouseout = function(){ autoPlay() };

		autoPlay();
		//自动播放效果
		function autoPlay() {
			play = setInterval(function(){
				index++;
				index >= aImg.length && (index = 0);
				show(index)
			},2000)
		}
		
		//图片切换，淡入淡出效果
		function show(a) {
			index = a;
			var alpha = 0;
			for(var x in aNum) aNum[x].className = "";
			aNum[index].className = "current";
			clearInterval(timer);

			//此处为初始化页面效果.当且仅当前页面透明度变化，其他页面透明度保证为0
			for(i=0;i<aImg.length;i++) {
				aImg[i].style.opacity = 0;
				aImg[i].style.filter = "alpha(opacity=0)";
			}
			//实现淡入淡出效果
			timer = setInterval(function(){
				alpha += 2;
				alpha >100 && (alpha = 100);
				aImg[index].style.opacity = alpha /100;
				aImg[index].style.filter= "alpha(opacity=alpha)";
				alpha == 100 && clearInterval(timer);
			},50);
		}
	}
	</script>
</head>
<body>
	<div id="box">
		<ul class="list">
			<li class="current"><img src="1.png" alt="111" width="490" height="170"></li>
			<li><img src="2.png" alt="222" width="490" height="170"></li>
			<li><img src="1.png" alt="333" width="490" height="170"></li>
			<li><img src="2.png" alt="444" width="490" height="170"></li>
			<li><img src="1.png" alt="555" width="490" height="170"></li>
		</ul>
		<ul class="count">
			<li class="current">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
</body>
</html>